<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>邀请记录</title>
	<link rel="stylesheet" href="../css/common.css">
	<style>
		.tabList{
			display: flex;
			padding: .5rem 0;
			border-bottom: 1px solid #E4E4E4;
			border-top: 1px solid #E4E4E4;
		}
		.tabs{
			width: 50%;
			text-align: center;
			font-size: 1rem;
			color: #888;
			border-right: 1px solid #E4E4E4;
		}
		.tabs:last-child{
			border: none;
		}
		.on{
			color: #0075ff;
		}
		.copyPhone{
			color: #FF0000;
			text-align: center;
			margin-top: 1rem;
		}
		.listBox{
			padding: 0 1rem;
			display: none;
		}
		.listDetail{
			margin: 1rem 0;
			padding: .5rem 1rem;
			box-sizing: border-box;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
		}
		.t_name{
			float: left;
		}
		.list_c{
			margin: .5rem 0;
		}
		.t_time{
			float: right;
			color: #888;
		}
		.c_phone{
			float: left;
			color: #666;
		}
		.c_copy{
			float: left;
			background-color: #d7d7d7;
			color: #fff;
			margin-left: .5rem;
			padding: 0 .5rem;
			border-radius: 4px;
			font-size: 0.75rem;
		}
		.b_guanxi{
			float: left;
		}
		.b_guanxi span {
			color: #888;
		}
		.b_state{
			float: right;
			background: linear-gradient(to right, #0075ff , #00c5ff);
			width: 5rem;
			height: 1.5rem;
			text-align: center;
			line-height: 1.5rem;
			color: #fff;
			border-radius: 2rem;
		}
		.b_stating{
			float: right;
			background: #999;
			width: 5rem;
			height: 1.5rem;
			text-align: center;
			line-height: 1.5rem;
			color: #fff;
			border-radius: 2rem;
		}
		.invite .active{
			display: block;
		}
		.shuoming{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #fff;
			z-index: 999;
			display: none;
			padding: 1rem;
			box-sizing: border-box;
		}
		.close{
			width: 1.5rem;
			height: 1.5rem;
			float: right;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenter">邀请记录</div>
			<div class="tabRight">邀请说明</div>
		</div>
	</div>
	<div class="invite">
		<div class="tabList">
			<div class="tabs on">邀请成功(12)</div>
			<div class="tabs">邀请中</div>
		</div>
		<div class="copyPhone">复制电话联系您的下级建立私域团队</div>
		<!-- 邀请成功 -->
		<div class="listBox active">
			<div class="listDetail">
				<div class="list_t cleardrift">
					<div class="t_name">admin</div>
					<div class="t_time">12-12 10:22</div>
				</div>
				<div class="list_c cleardrift">
					<div class="c_phone">12</div>
					<div class="c_copy" onclick="copy">复制</div>
				</div>
				<div class="list_b cleardrift">
					<div class="b_guanxi"><span>与我关系</span>: 直接</div>
					<div class="b_state">邀请成功</div>
				</div>
			</div>
			
			<div class="listDetail">
				<div class="list_t cleardrift">
					<div class="t_name">admin</div>
					<div class="t_time">12-12 10:22</div>
				</div>
				<div class="list_c cleardrift">
					<div class="c_phone">33333333</div>
					<div class="c_copy">复制</div>
				</div>
				<div class="list_b cleardrift">
					<div class="b_guanxi"><span>与我关系</span>: 直接</div>
					<div class="b_state">邀请成功</div>
				</div>
			</div>
		</div>
		<!-- 邀请中 -->
		<div class="listBox">
			<div class="listDetail">
				<div class="list_t cleardrift">
					<div class="t_name">admin</div>
					<div class="t_time">12-12 10:22</div>
				</div>
				<div class="list_c cleardrift">
					<div class="c_phone">123123123</div>
					<div class="c_copy">复制</div>
				</div>
				<div class="list_b cleardrift">
					<div class="b_guanxi"><span>与我关系</span>: 直接</div>
					<div class="b_stating">邀请中</div>
				</div>
			</div>
			
			<div class="listDetail">
				<div class="list_t cleardrift">
					<div class="t_name">admin</div>
					<div class="t_time">12-12 10:22</div>
				</div>
				<div class="list_c cleardrift">
					<div class="c_phone">123123123</div>
					<div class="c_copy">复制</div>
				</div>
				<div class="list_b cleardrift">
					<div class="b_guanxi"><span>与我关系</span>: 直接</div>
					<div class="b_stating">邀请中</div>
				</div>
			</div>
		</div>
	</div>
	<div class="shuoming">
		<div class="cleardrift">
			<img src="../assets/close.png" class="close cleardrift" >
		</div>
		<div>1111</div>
	</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/clipboard.min.js"></script>
<script src="../js/common.js"></script>
<script>
	$(function(){
		$('.tabs').click(function(){
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
      		 $(".listBox").eq(index).addClass("active").siblings().removeClass("active");
		})
	})
	// 复制功能
	function copy(){
		console.log(111)
		var txt = document.getElementsByClassName()("c_phone").innerText;
		console.log(txt)
		var inp = document.getElementById("inp");
		inp.value = txt;
		inp.select();
		document.execCommand("copy");
		alert("复制成功")
	}
	$('.tabRight').click(function(){
		$('.shuoming').fadeIn(500)
	})
	$('.close').click(function(){
		$('.shuoming').fadeOut(500)
	})
</script>
